<template>
  <el-row :gutter="10">
    <el-col :span="4">
      <el-input  v-model="patientName"  placeholder="就诊人姓名"/>
    </el-col>
    <el-col :span="4">
      <el-input   v-model="patientIdCard"  placeholder="就诊人身份证号"/>
    </el-col>
    <el-col :span="2">
      <el-button type="primary" @click="paging(1)">取号</el-button>
    </el-col>
  </el-row>
  <el-table
      :data="page.list"
      style="width: 100%">
    <el-table-column
        prop="id"
        label="预约记录序号">
    </el-table-column>
    <el-table-column
        prop="patient.name"
        label="患者姓名"
        >
    </el-table-column>
    <el-table-column
        prop="patient.idcard"
        label="身份证号"
        >
    </el-table-column>
    <el-table-column
        prop="patient.phone"
        label="手机号">
    </el-table-column>
    <el-table-column
        prop="scheduling.doctor.name"
        label="医生姓名">
    </el-table-column>
    <el-table-column
        prop="scheduling.title"
        label="预约型号">
    </el-table-column>
    <el-table-column
        prop="scheduling.price"
        label="预约价格">
    </el-table-column>
    <el-table-column
        prop="scheduling.clinic.name"
        label="所属门诊">
    </el-table-column>


    <el-table-column
        width="150"
        label="操作">

      <template v-slot="scope">
        <el-button type="success" @click="payfee(scope.row)">修改</el-button>
      </template>

    </el-table-column>
  </el-table>
  <el-pagination
      style="display: flex;justify-content: center"
      @size-change="handleSizeChange"
      @current-change="paging"
      :current-page="page.pageNum"
      :page-sizes="[2, 4, 6, 8]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
  </el-pagination>
  <el-dialog title="缴费" @close="refresh" v-model="dialogFormVisible">
    <el-form>
    <div class="demo-input-suffix">
      <el-text style="padding: 20px">是否完成缴费</el-text>
      <el-button style="padding: 20px" type="primary" @click="payYN">是</el-button>
    </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import { ElMessage } from 'element-plus'
const dialogFormVisible=ref( false)
const patientName=ref("")
const rankRecord=ref({})
const patientIdCard=ref("")
const pageSize=ref(2)
const page=ref({})
//查找
const paging=(curPage)=>{
  axios.get('rankRecord/getByNameAndPage',{
    params:{
      idCard:patientIdCard.value,
      name:patientName.value,
      pageNum:curPage,
      pageSize:pageSize.value
    }
  }).then(res=>{
   if (res.data.code==200){
     ElMessage({
       message: res.data.msg,
       type: 'success',
     })
     page.value=res.data.data
   }else {
     page.value= {}
     ElMessage.error(res.data.msg)
   }
  })
}
//刷新
const refresh = () => {
  paging(1)
  patientName.value=""
  patientIdCard.value=""
  rankRecord.value={}
}
//打开缴费页面
const payfee=(row)=>{
  rankRecord.value=row
  dialogFormVisible.value=true
}
const handleSizeChange = (ps) => {
  pageSize.value=ps
  paging(1)
}
//缴费完成后
const payYN=()=>{
  axios.post("rankRecord/payY",rankRecord.value).then(res=>{
    if (res.data.code==200){
      alert("缴费成功,号码为:"+res.data.data+"号")
      dialogFormVisible.value=false
      paging(1)
    }else {
      ElMessage.error(res.data.msg)
    }
  })
}


//页面初始化
onMounted(()=>{
  paging(1)
})
</script>

<style scoped>
.demo-input-suffix{
  width: '100%';
  height: 200px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>